<template>
  <view>
    <customtop2 :top_title="top_title"></customtop2>
    <view class="search">
      <view class="container">
        <view class="search_box" @click="searchClick">
          <view class="icon"> <i class="iconfont icon-sousuoxiao"></i></view>
          <view class="input">请输入搜索内容 </view>
          <span class="btn none">搜索</span>
        </view>
      </view>
    </view>

    <view v-if="!loading">
      <view class="banner" v-if="banner_data.length > 0">
        <view class="container">
          <swiper class="swiper" circular :autoplay="true" :style="{ height: `${swiper_height}` }">
            <swiper-item v-for="(item, index) in banner_data" :key="index" @click="
                item.url_open_mode == 1
                  ? jumpPage(item.url)
                  : switchTab(item.url)
              ">
              <view class="swiper-item">
                <image class="img" mode="widthFix" :src="item.image" @load="onLoadImg"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>

      <view class="sudoku" v-if="sudoku_data.length > 0">
        <view class="container">
          <view class="item" v-for="(item, index) in sudoku_data" :key="index" @click="
              item.url_open_mode == 1 ? jumpPage(item.url) : switchTab(item.url)
            ">
            <image class="img" :src="item.image" />
            <view class="txt">{{ item.title }}</view>
          </view>
        </view>
      </view>

      <view class="abb_list" v-if="!data_list_loading">
        <view v-if="data_list.length > 0">
          <view class="items">
            <view class="item" v-for="(item, index) in data_list" :key="index" @click="
                jumpPage(
                  logined
                    ? '/pages/postList/detail?id=' + item.id
                    : '/pages/account/login_password'
                )
              ">
              <view class="title">{{ item.title }}</view>
              <view class="typesa">
                <view class="bitem">
                  <span class="xb on" v-if="item.issyxm == 1">上押项目</span>
                  <span class="xb-1" v-else>项目</span>
                </view>
                <view class="bitem"><i class="iconfont icon-chakan"></i><span class="txt">{{ item.cksl }}</span></view>
                <view class="bitem"><i class="iconfont icon-icon-person-hezuo2"></i><span
                    class="txt">{{ item.zxsl }}</span></view>
                <view class="bitem bitem4" v-if="item.iszhiding == 1">
                  <span class="xb xb1">置顶</span>
                </view>
              </view>
            </view>
          </view>
          <view class="uloadmore"><u-loadmore :status="loadmore_status" /></view>
        </view>
        <view :style="{ marginTop: '30px' }" v-if="data_list.length == 0">
          <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无报名人员~">
          </u-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    request
  } from "@/utils/http.js";
  import util from "@/utils/util.js";
  import customtop2 from "@/components/customtop2.vue";

  export default {
    components: {
      customtop2
    },

    data() {
      return {
        top_title: "硬货",
        loading: true,
        banner_data: [],
        sudoku_data: [],
        swiper_height: 0,
        config: {},
        logined: false,
        loginUser: {},

        data_list: [],
        data_list_loading: true,
        loadmore_status: "loadmore",
        loadmore_finished: false,
        params: {
          page_size: 15,
          page: 1,
        },
      };
    },
    onShow(options) {
      // 邀请有礼
      // if (options.scene != undefined) {
      //   let scene = decodeURIComponent(options.scene);
      //   let obj = util.urlToObj(scene);
      //   if (obj.inviteUserId != undefined) {
      //     uni.setStorageSync("inviteUserId", obj.inviteUserId);
      //   }
      // }
      // if (options.inviteUserId != undefined) {
      //   uni.setStorageSync("inviteUserId", options.inviteUserId);
      // }

      request.post("/common/getConfig").then((res) => {
        this.config = res.data;
        this.top_title = res.data.app_name;
      });
      this.getAbbsPaginate();
      uni.showLoading();
      // this.getBannserData();
      this.getSudokuData();
      // this.getInit();
      this.getUserInfo()
    },

    // onShow: function() {},
    onReachBottom() {
      this.getMore();
    },

    onPullDownRefresh: function() {
      this.getInit();
    },

    methods: {
      getUserInfo() {
        request.post("/user/getLoginUser").then((res) => {
          if (res.data.id) {
            this.logined = true;
            this.loginUser = res.data;
          } else {
            this.logined = false;
          }
        });
      },
      searchClick() {
        this.$u.route("/pages/abb/list");
      },
      onLoadImg: function(e) {
        var width = uni.getSystemInfoSync().windowWidth - 30;
        var imgheight = e.detail.height;
        var imgwidth = e.detail.width;
        var height = (width * imgheight) / imgwidth + "px";
        this.swiper_height = height;
      },

      getBannserData: function() {
        request
          .post("/common/getAdver", {
            code: "h5_index_banner"
          })
          .then((res) => {
            if (res.data?.values) {
              this.banner_data = res.data.values;
            }
          });
      },
      // 九宫格
      getSudokuData: function() {
        request.post("/common/getAdver", {
          code: "h5_sudoku"
        }).then((res) => {
          if (res.data?.values) {
            console.log(res.data.values);
            this.sudoku_data = res.data.values;
          }
        });
      },

      // 请求接口，获取列表数据
      getAbbsPaginate: function() {
        let params = this.params;
        request.post("/xiangmushe/getIndexAllList", params).then((res) => {
          uni.stopPullDownRefresh();
          uni.hideLoading();
          this.loading = false;
          this.data_list_loading = false;

          // 返回数据为空
          if (res.data.total == 0) {
            this.data_list = [];
            return false;
          }

          // 组装数据
          if (res.data.current_page == 1) {
            this.data_list = res.data.data;
          } else {
            this.data_list = this.data_list.concat(res.data.data);
          }

          // 最后一页
          if (this.params.page == res.data.last_page) {
            this.loadmore_finished = true;
            this.loadmore_status = "nomore";
            return false;
          }

          this.params.page = parseInt(res.data.current_page) + parseInt(1);
          this.loadmore_status = "loadmore";
          this.loadmore_finished = false;
        });
      },

      // 初始化请求
      getInit: function() {
        uni.showLoading();
        this.params.page = 1;
        this.getAbbsPaginate();
      },

      // 加载更多
      getMore: function() {
        if (!this.loadmore_finished) {
          this.loadmore_status = "loading";
          this.getAbbsPaginate();
        }
      },

      switchTab: function(url) {
        uni.switchTab({
          url: url
        });
      },

      jumpPage: function(url) {
        uni.navigateTo({
          url: url
        });
        console.log(url);
      },

      onShareAppMessage() {
        return {
          title: this.config.wxapp.app_name,
          path: "/pages/index/index",
        };
      },

      onShareTimeline: function() {
        return {
          title: this.config.wxapp.app_name,
          path: "/pages/index/index",
        };
      },
    },
  };
</script>

<style>
  @import url("index.css");
  @import url("../abb/abb.css");

  page {
    background-color: #fff;
  }

  .abb_list {
    border-top: 1px solid #f5f5f5;
  }
</style>
